<template>
	<view class="container" :style="{height: bgHeight}">
		<view class="container-bg">
			<view class="title">添加班级</view>
			<view class="form-box">
				<view class="area-box">
					<view class="area-item">
						<view class="area-input-box">
							<picker @change="provinceChange" :range="provinceList" range-key="Name">
								<view class="uni-input">{{provinceList[provinceIndex].Name}}</view>
							</picker>
						</view>
					</view>
					<view class="area-item">
						<view class="area-input-box">
							<picker @change="cityChange" :range="cityList" range-key="Name">
								<view class="uni-input">{{cityList[cityIndex].Name}}</view>
							</picker>
						</view>
					</view>
					<view class="area-item">
						<view class="area-input-box">
							<picker @change="districtChange" :range="districtList" range-key="Name">
								<view class="uni-input">{{districtList[districtIndex].Name}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="item-box">
					<view class="item-input">
						<picker @change="schoolChange" :range="schoolList" range-key="Name">
							<view class="uni-input">{{schoolList[schoolIndex].Name}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						
					</view>
				</view>
				<view class="item-box">
					<view class="item-input">
						<picker @change="classChange" :range="classList" range-key="Name">
							<view class="uni-input">{{classList[classIndex].Name}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						
					</view>
				</view>
				<view class="item-box">
					<view class="item-input">
						<picker @change="courseChange" :range="courseList" range-key="Name">
							<view class="uni-input">{{courseList[courseIndex].Name}}</view>
						</picker>
					</view>
					<view class="item-arrow">
						
					</view>
				</view>
			</view>
			<view class="publish-btn" @tap="doSubmit">提交</view>
		</view>
	</view>
</template>

<script>
	import {myRequest,showToastMsg} from '../../utils'
	
	export default {
		data() {
			return {
				loading: false,
				bgHeight: '603px',
				provinceIndex: 0,
				provinceList: [{Id: 0, Name: '选择省'}],
				cityIndex: 0,
				cityList: [{Id: 0, Name: '选择市'}],
				districtIndex: 0,
				districtList: [{Id: 0, Name: '选择区/县'}],
				schoolIndex: 0,
				schoolList: [{Id: 0, Name: '选择学校'}],
				classIndex: 0,
				classList: [{Id: 0, Name: '选择班级'}],
				courseIndex: 0,
				courseList: [{Id: 0, Name: '选择科目'}],
				timer: null
			}
		},
		
		onLoad() {
			
			let that = this
			
			myRequest({
				url: '/api/province_list',
				data: {},
			}, function(res) {
						
				if (res.statusCode != 200) {
					uni.showModal({
						title: '提示',
						content: '服务器错误，请求失败'
					})
					return
				}
						
				if (res.data.status != 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				
				let data = res.data.data
				that.provinceList = []
				that.provinceList.push({Id: 0, Name: '选择省'})
				for (let i = 0; i < data.length; i++) {
					that.provinceList.push(data[i])
				}		
						
			})
			
			myRequest({
				url: '/api/course_list',
				data: {},
			}, function(res) {
						
				if (res.statusCode != 200) {
					uni.showModal({
						title: '提示',
						content: '服务器错误，请求失败'
					})
					return
				}
						
				if (res.data.status != 0) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				
				let data = res.data.data
				that.courseList = []
				that.courseList.push({Id: 0, Name: '选择科目'})
				for (let i = 0; i < data.length; i++) {
					that.courseList.push(data[i])
				}		
						
			})
			
		},
		
		onShow() {
			this.bgHeight = (uni.getSystemInfoSync().screenHeight - 64) + 'px'
		},
		
		methods: {
			
			provinceChange(e) {
				this.provinceIndex = e.target.value
				this.getCity()
			},
			
			cityChange(e) {
				this.cityIndex = e.target.value
				this.getDistrict()
			},
			
			districtChange(e) {
				this.districtIndex = e.target.value
				this.getSchool()
			},
			
			schoolChange(e) {
				this.schoolIndex = e.target.value
				this.getClass()
			},
			
			classChange(e) {
				this.classIndex = e.target.value
			},
			
			courseChange(e) {
				this.courseIndex = e.target.value
			},
			
			getCity() {
				let that = this
				myRequest({
					url: '/api/city_list_by_province',
					data: {
						id: that.provinceList[that.provinceIndex].Id
					},
				}, function(res) {
							
					if (res.statusCode != 200) {
						uni.showModal({
							title: '提示',
							content: '服务器错误，请求失败'
						})
						return
					}
							
					if (res.data.status != 0) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
							
					let data = res.data.data
					that.cityList = []
					that.cityList.push({Id: 0, Name: '选择市'})
					for (let i = 0; i < data.length; i++) {
						that.cityList.push(data[i])
					}		
							
				})
			},
			
			getDistrict() {
				let that = this
				myRequest({
					url: '/api/district_list_by_city',
					data: {
						id: that.cityList[that.cityIndex].Id
					},
				}, function(res) {
							
					if (res.statusCode != 200) {
						uni.showModal({
							title: '提示',
							content: '服务器错误，请求失败'
						})
						return
					}
							
					if (res.data.status != 0) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
							
					let data = res.data.data
					that.districtList = []
					that.districtList.push({Id: 0, Name: '选择区/县'})
					for (let i = 0; i < data.length; i++) {
						that.districtList.push(data[i])
					}	
							
				})
			},
			
			getSchool() {
				let that = this
				myRequest({
					url: '/api/school_list_by_district',
					data: {
						id: that.districtList[that.districtIndex].Id
					},
				}, function(res) {
							
					if (res.statusCode != 200) {
						uni.showModal({
							title: '提示',
							content: '服务器错误，请求失败'
						})
						return
					}
							
					if (res.data.status != 0) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
							
					let data = res.data.data
					that.schoolList = []
					that.schoolList.push({Id: 0, Name: '选择学校'})
					for (let i = 0; i < data.length; i++) {
						that.schoolList.push(data[i])
					}	
							
				})
			},
			
			getClass() {
				let that = this
				myRequest({
					url: '/api/class_list_by_school',
					data: {
						id: that.schoolList[that.schoolIndex].Id
					},
				}, function(res) {
							
					if (res.statusCode != 200) {
						uni.showModal({
							title: '提示',
							content: '服务器错误，请求失败'
						})
						return
					}
							
					if (res.data.status != 0) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
							
					let data = res.data.data
					that.classList = []
					that.classList.push({Id: 0, Name: '选择学校'})
					for (let i = 0; i < data.length; i++) {
						that.classList.push(data[i])
					}
							
				})
			},
			
			doSubmit() {
				
				let that = this
				
				let provinceId = that.provinceList[that.provinceIndex].Id
				let cityId = that.cityList[that.cityIndex].Id
				let districtId = that.districtList[that.districtIndex].Id
				let schoolId = that.schoolList[that.schoolIndex].Id
				let classId = that.classList[that.classIndex].Id
				let courseId = that.courseList[that.courseIndex].Id
				
				if (provinceId <= 0) {
					showToastMsg('请选择省')
					return
				}
				if (cityId <= 0) {
					showToastMsg('请选择市')
					return
				}
				if (districtId <= 0) {
					showToastMsg('请选择区县')
					return
				}
				if (schoolId <= 0) {
					showToastMsg('请选择学校')
					return
				}
				if (classId <= 0) {
					showToastMsg('请选择班级')
					return
				}
				if (courseId <= 0) {
					showToastMsg('请选择科目')
					return
				}
				
				if (that.loading) return
				that.loading = true
				
				uni.showLoading({
					title: '拼命提交中...',
					success() {
						
						if (that.timer != null) {
							clearTimeout(that.timer)
						}
						
						that.timer = setTimeout(function() {
							
							myRequest({
								url: '/api/add_class',
								data: {
									class_id: classId,
									course_id: courseId
								},
							}, function(res) {
								
								uni.hideLoading()
								that.loading = false
								
								if (res.statusCode != 200) {
									uni.showModal({
										title: '提示',
										content: '服务器错误，请求失败'
									})
									return
								}
								
								if (res.data.status == 1000) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
									return
								}
								
								showToastMsg(res.data.msg)
								
								if (res.data.status == 0) {
									uni.navigateTo({
										url: '/pages/teacher_index/teacher_index'
									})
								}
								
							})
							
						}, 1000)
						
					}
				})
				
			}
			
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';  /* project id 1705280 */
		src: url('https://at.alicdn.com/t/font_1705280_otaltml7zrq.ttf') format('truetype');
	}
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 36rpx;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.iconarrow-down:before {
	  content: "\e601";
	}
	
	.container {
		width: 750rpx;
		background-image: radial-gradient(circle, #fedd04, #fec305);
		min-height: 1200rpx;
	}
	
	.container-bg {
		position: absolute;
		width: 750rpx;
		height: 100%;
		background-image: url(https://public-1300796766.cos.ap-guangzhou.myqcloud.com/mini/2.png);
		background-size: cover;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.title {
		font-size: 50rpx;
		margin-top: 50rpx;
	}
	
	.form-box {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	
	.area-box {
		display: flex;
		justify-content: space-between;
	}
	
	.area-item {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		margin-top: 30rpx;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
	}
	
	.area-input-box {
		margin-left: 24rpx;
	}
	
	.item-box {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		margin-top: 30rpx;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
	}
	
	.item-input {
		width: 270rpx;
		margin-left: 24rpx;
	}
	
	.content-box {
		width: 560rpx;
		height: 530rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		box-shadow: 2rpx 6rpx 18rpx 0px rgba(167, 167, 167, 0.71);
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
	}
	
	.content-input {
		width: 100%;
		height: 100%;
	}
	
	.publish-btn {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		font-size: 38rpx;
	}
</style>
